<template>
  <div class="Mymusic">
    <!-- 没有登录的 时候 所展示的div -->
    <div class="noLogin" v-if="Object.keys(userStoreProfile).length === 0">
      <!-- 内容 -->
      <div>
        <h2></h2>
        <el-button type="success" @click="toLoginPage">立即登录</el-button>
      </div>
    </div>
    <!-- 已经登录的~ -->
    <div class="finshLogin" v-else>
      <div
        class="finshLogin_userInfo"
        :style="{
          backgroundImage: 'url(' + userStoreProfile.backgroundUrl + ')',
        }"
      >
        <div class="w">
          <div class="finshLogin_userInfo_avatar">
            <img
              :src="userStoreProfile.avatarUrl"
              :alt="userStoreProfile.nickname"
              :title="userStoreProfile.nickname"
            />
          </div>
          <div class="finshLogin_userInfo_shuju">
            <div class="name" @click="test">
              {{ userStoreUserDetail.profile.nickname }}
              <span class="level">
                <i>Lv</i>
                {{ userStoreUserDetail.level }}</span
              >
            </div>
            <div class="guanzhu">
              <div @click="activeNavId = 7">
                <span>{{ userStoreProfile.eventCount }}</span>
                <p>动态</p>
              </div>
              <div @click="activeNavId = 3">
                <span>{{ userStoreProfile.follows }}</span>
                <p>关注</p>
              </div>
              <div @click="activeNavId = 4">
                <span>{{ userStoreProfile.followeds }}</span>
                <p>粉丝</p>
              </div>
            </div>
          </div>
          <!-- finshLogin_userInfo_nav  -->
          <div class="finshLogin_userInfo_nav">
            <div class="w">
              <span
                class="finshLogin_userInfo_nav_item"
                :key="item.id"
                v-for="item in nav"
                :class="activeNavId === item.id ? 'active' : null"
                @click="activeNavId = item.id"
              >
                {{ item.title }}
              </span>
            </div>
          </div>
        </div>
      </div>
      <!-- 歌单 等等 -->
      <div class="w finshLogin_box">
        <userInfoComponent v-if="activeNavId === 0" />
        <likeComponent v-if="activeNavId === 1" />
        <createAlbumComponent v-if="activeNavId === 2" />
        <followsComponent
          :total="userStoreProfile.follows"
          v-if="activeNavId === 3"
        />
        <followedsComponent
          v-if="activeNavId === 4"
          :total="userStoreProfile.followeds"
        />
        <eventCountComponent
          v-if="activeNavId === 7 && Object.keys(userDetail).length != 0"
          :uid="userDetail.profile.userId"
          :total="userDetail.profile.eventCount"
        />
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations, mapActions } from "vuex";
import { getUserDetail } from "../../api/myMusicApi";
import userInfoComponent from "./components/userInfo";
import likeComponent from "./components/like.vue";
import createAlbumComponent from "./components/createAlbum/index.vue";
import followsComponent from "./components/follows/index.vue";
import followedsComponent from "./components/followeds/index.vue";
import eventCountComponent from "./components/eventCount";
export default {
  name: "Mymusic",
  components: {
    userInfoComponent,
    likeComponent,
    createAlbumComponent,
    followsComponent,
    followedsComponent,
    eventCountComponent,
  },
  data() {
    return {
      userDetail: {},
      nav: [
        { id: 0, title: "基本信息" },
        { id: 1, title: "我喜欢" },
        { id: 2, title: "我创建的歌单" },
        { id: 3, title: "关注" },
        { id: 4, title: "粉丝" },
        { id: 5, title: "我的已购" },
        { id: 6, title: "我上传的视频" },
        { id: 7, title: "动态" },
      ],
      // activeNavId: 0,
      activeNavId: 0,
    };
  },

  created() {
    //把 vuex 中存储的用户的id 赋值给 id
    // this.id = userStoreProfile.userId;
    // this.getUserDetailMethod();
    // this.getUserDetailActions();
  },
  watch: {
    activeNavId(newValue) {
      if (newValue == 7) {
        this.getUserDetailMethod();
      }
    },
  },
  methods: {
    ...mapMutations("userStore", [
      "changeProfile",
      "changeCookie",
      "changeToken",
    ]),
    ...mapActions("userStore", ["getUserDetailActions"]),
    // 根据用户的id 获取详细信息
    async getUserDetailMethod() {
      let result = await getUserDetail(this.userStoreProfile.userId);
      if (result.code === 200) {
        this.userDetail = result;
      }
    },
    toLoginPage() {
      this.$router.push({
        path: "/login",
        query: {
          path: encodeURI(this.$route.fullPath),
        },
      });
    },
    test() {
      console.log(this.userStoreProfile.userId);
    },
  },
  computed: {
    ...mapState({
      userStoreProfile: (state) => state.userStore.profile,
      userStoreCookie: (state) => state.userStore.cookie,
      userStoreToken: (state) => state.userStore.token,
      userStoreUserDetail: (state) => state.userStore.userDetail,
    }),
  },
};
</script>
<style lang="less" scoped>
.Mymusic {
  // height: calc(100vh - 377px - 90px);
  color: #000000;
  font-size: 14px;
  .noLogin {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 800px;
    background: url("../../assets/images/bg_profile_unlogin.69aad5de.webp")
      no-repeat 50% / cover;
    text-align: center;
    h2 {
      background: url("../../assets/images/profile_tit@2x.ed3e105a.png")
        no-repeat left top/100%;
      height: 95px;
      width: 1200px;
    }
    /deep/ .el-button--success {
      display: inline-block;
      background-color: @globalColor;
      margin-top: 40px;
      height: 48px;
      width: 128px;
      font-size: 18px;
    }
  }
  .finshLogin {
    .finshLogin_userInfo {
      position: relative;
      height: 500px;
      background-repeat: no-repeat;
      background-size: cover;
      background-position: 50%;
      padding-top: 120px;
      .finshLogin_userInfo_avatar {
        display: flex;
        justify-content: center;
        align-items: center;
        img {
          width: 110px;
          height: 110px;
          border: 4px solid #ffffff;
          border-radius: 50%;
        }
      }
      .finshLogin_userInfo_shuju {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 10px 0;
        .name {
          color: #ffffff;

          font-size: 26px;
          // font-weight: bold;
          .level {
            display: inline-block;
            height: 19px;
            line-height: 21px;
            color: @globalColor;
            font-size: 16px;
            font-weight: bold;
            font-style: italic;
            // background: url("../../assets/images/icon2.png") no-repeat -135px -190px;
            i {
              font-size: 24px;
              font-weight: normal;
              font-style: italic;
            }
          }
        }
        .guanzhu {
          margin-top: 10px;
          color: #ffffff;
          display: flex;
          font-size: 14px;
          &:hover {
            cursor: pointer;
          }
          > div {
            padding: 0 25px;
            text-align: center;
            &:nth-child(1) {
              border-right: 1px solid @globalColor;
            }
            &:nth-child(2) {
              border-right: 1px solid @globalColor;
            }
            p {
              margin-top: 6px;
            }
            span {
              font-size: 16px;
              &:hover {
                color: @globalColor;
                cursor: pointer;
              }
            }
          }
        }
      }
      .finshLogin_userInfo_nav {
        position: absolute;
        font-size: 16px;
        color: #ffffff;
        bottom: 6px;
        left: 0;
        width: 100%;
        height: 30px;
        // background-color: red;
        span {
          cursor: pointer;
          padding: 0 10px;
          &.active {
            color: @globalColor;
          }
          &:nth-child(1) {
            padding-left: 0;
          }
        }
      }
    }

    .finshLogin_box {
      padding: 20px 0;
    }
  }
}
</style>


